<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  getDetailsApi,
  cancelOrderApi,
  finishOrderApi,
  refundOrderApi,
  cancelRefundOrderApi
} from '@/api/order'
import parseTime from '@/utils/time'
import parseStatus from '@/utils/dictionary'
import { useCountDown } from '@/composables/countDown.js'
const { formatTime, start } = useCountDown()

const route = useRoute()
const router = useRouter()

const orderDetails = ref({})
const setOrderDetails = async () => {
  const res = await getDetailsApi(route.params.id)
  orderDetails.value = res.data
  start(Date.parse(parseTime(orderDetails.value.payEndTime)))
}

// 取消订单
const cancelOrder = async (id) => {
  await cancelOrderApi(id)
  // eslint-disable-next-line no-undef
  ElMessage.success('已成功取消')
  router.replace('/member/order')
}

// 完成订单
const finishOrder = async (id) => {
  await finishOrderApi(id)
  // eslint-disable-next-line no-undef
  ElMessage.success('操作成功')
  router.replace('/member/order')
}

// 退款
const refundOrder = async (id) => {
  await refundOrderApi(id)
  // eslint-disable-next-line no-undef
  ElMessage.success('操作成功')
  router.replace('/member/order')
}

// 取消退款
const cancelRefundOrder = async (id) => {
  await cancelRefundOrderApi(id)
  // eslint-disable-next-line no-undef
  ElMessage.success('操作成功')
  router.replace('/member/order')
}

onMounted(() => setOrderDetails())
</script>
<template>
  <div class="xtx-pay-checkout-page">
    <div class="container">
      <div class="wrapper" v-if="Object.keys(orderDetails).length > 0">
        <!-- 商品信息 -->
        <h3 class="box-title">车辆信息</h3>
        <div class="box-body" style="padding-top: 10px">
          <table class="goods">
            <thead>
              <tr>
                <th width="320">商品信息</th>
                <th width="150">总价</th>
                <th width="320">交易地址</th>
                <th width="150">联系方式</th>
                <th width="320">车主备注</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <car-item-publish
                    :car="orderDetails.vehiclePublish"
                    disable
                    size="order"
                  />
                </td>
                <td>&yen;{{ orderDetails.vehiclePublish.currentPrice }}</td>
                <td>
                  {{
                    orderDetails.vehiclePublish.tradeAddr ||
                    orderDetails.vehiclePublish.campusOrShopName
                  }}
                </td>
                <td>{{ orderDetails.vehiclePublish.telNum }}</td>
                <td>{{ orderDetails.vehiclePublish.leaveMessage }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- 金额明细 -->
        <h3 class="box-title">订单详情</h3>
        <div style="margin: 20px 0 0 20px">
          <el-descriptions :column="1">
            <el-descriptions-item label="订单编号">
              {{ orderDetails.id }}
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">
              {{ parseTime(orderDetails.createTime) }}
            </el-descriptions-item>
            <el-descriptions-item label="订单总额">
              {{ orderDetails.orderPrice }}
            </el-descriptions-item>
            <el-descriptions-item label="实际支付">
              {{ orderDetails.orderPrice }}
            </el-descriptions-item>
            <el-descriptions-item label="应付总额">
              <span style="font-size: 18px; color: red">
                {{ orderDetails.orderPrice }}</span
              >
            </el-descriptions-item>
            <el-descriptions-item label="订单状态">
              <el-text type="warning">
                {{ parseStatus(400, orderDetails.orderStatus) }}
              </el-text>
            </el-descriptions-item>
            <el-descriptions-item align="right">
              <div style="margin: 0 60px 45px">
                <template v-if="orderDetails.orderStatus === 40001">
                  <el-button
                    type="primary"
                    size="large"
                    round
                    plain
                    @click="router.replace(`/order/payPage/${route.params.id}`)"
                    >点击支付
                  </el-button>
                  <el-button
                    type="warning"
                    size="large"
                    round
                    plain
                    @click="cancelOrder(route.params.id)"
                    >取消订单
                  </el-button>
                  <p style="margin-top: 10px" v-if="orderDetails.payEndTime">
                    支付还剩 <span>{{ formatTime }}</span
                    >, 超时后将取消订单
                  </p>
                </template>
                <template v-if="orderDetails.orderStatus === 40002">
                  <el-button
                    type="success"
                    round
                    plain
                    size="large"
                    @click="finishOrder(route.params.id)"
                  >
                    完成交易
                  </el-button>
                  <el-button
                    type="danger"
                    round
                    plain
                    size="large"
                    @click="refundOrder(route.params.id)"
                  >
                    退款
                  </el-button>
                </template>
                <template v-if="orderDetails.orderStatus === 40003">
                  <p style="font-size: 20px">订单已取消</p>
                </template>
                <template v-if="orderDetails.orderStatus === 40004">
                  <el-button
                    type="primary"
                    size="large"
                    round
                    plain
                    @click="cancelRefundOrder(route.params.id)"
                    >取消退款
                  </el-button>
                </template>
                <template v-if="orderDetails.orderStatus === 40005">
                  <p style="font-size: 20px">已成功退款</p>
                </template>
                <template v-if="orderDetails.orderStatus === 40006">
                  <el-text type="success" style="font-size: 20px"
                    >订单已完成
                  </el-text>
                </template>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.xtx-pay-checkout-page {
  margin-top: 20px;

  .wrapper {
    background: #fff;
    padding: 10px 20px;

    .box-title {
      font-size: 16px;
      font-weight: 700px;
      padding-left: 10px;
      line-height: 50px;
      border-bottom: 1px solid #f5f5f5;
    }

    .box-body {
      padding: 20px 0;
    }
  }
}

.goods {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;

  img {
    height: 150px;
    max-width: 300px;
    object-fit: cover;
    border-radius: 10px;
  }

  tr {
    th {
      background: #f5f5f5;
      font-weight: normal;
    }

    td,
    th {
      text-align: center;
      padding: 20px;
      border-bottom: 1px solid #f5f5f5;

      &:first-child {
        border-left: 1px solid #f5f5f5;
      }

      &:last-child {
        border-right: 1px solid #f5f5f5;
      }
    }
  }
}
</style>
